<script setup lang="ts">
import { onMounted, ref } from 'vue'
import StatBoxCard from '../stat-box-card/StatBoxCard.vue'
import StatBoxChart from '../stat-box-chart/StatBoxChart.vue'
import { getLineChart, getBarChart, getPieChart, getPieIconChart } from '@/plugins/echarts/options/index'

// 四个卡片
const card1 = ref<any>(null)
const card2 = ref<any>(null)
const card3 = ref<any>(null)
const card4 = ref<any>(null)

const initCards = () => {
  setTimeout(() => {
    card1.value = {
      num: 12256,
      compare: -205
    }
    card2.value = {
      num: 12256,
      compare: 205
    }
    card3.value = {
      num: 12256,
      compare: 0
    }
    card4.value = {
      num: 12256
    }
  }, 600)
}

// 近15日人流量趋势
const lineChartOpt1 = ref<any>(null)
const line1NoData = ref(false)
const initLine1 = () => {
  setTimeout(() => {
    lineChartOpt1.value = getLineChart({
      seriesData: [120, 132, 101, 134, 90, 230, 210],
      xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'],
      color: '#0275FF'
    })
  }, 600)
}

// 近一年人流量趋势
const barChartOpt1 = ref<any>(null)
const bar1NoData = ref(false)
const initBar1 = () => {
  setTimeout(() => {
    barChartOpt1.value = getBarChart({
      seriesData: [120, 132, 101, 134, 90, 230, 210],
      xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'],
      color: '#0275FF'
    })
  }, 600)
}

const filterOptions = [
  { value: 'day', label: '当日' },
  { value: 'month', label: '本月' },
  { value: 'year', label: '本年' }
]

// 游客年龄占比
const pie1Type = ref('day')
const pieChartOpt1 = ref<any>(null)
const pie1NoData = ref(false)
const initPie1 = () => {
  setTimeout(() => {
    pieChartOpt1.value = getPieChart({
      subtext: '总量',
      seriesName: '游客年龄占比',
      seriesData: [
        { value: 1048, name: '10岁以下' },
        { value: 735, name: '10~20岁' },
        { value: 580, name: '20~30岁' },
        { value: 484, name: '30~40岁' },
        { value: 300, name: '40~50岁' },
        { value: 500, name: '50~60岁' },
        { value: 600, name: '60岁及以上' }
      ]
    })
  }, 600)
}

// 游客性别占比
const pie2Ref = ref()
const pie2Type = ref('day')
const pieChartOpt2 = ref<any>(null)
const pie2NoData = ref(false)
const initPie2 = () => {
  setTimeout(() => {
    pieChartOpt2.value = getPieIconChart({
      subtext: '男女占比',
      seriesName: '游客性别占比',
      seriesData: [
        { value: 62, name: '男性占比' },
        { value: 38, name: '女性占比' }
      ],
      colors: ['#0275FF', '#35CBCA']
    })
  }, 600)
}
const pie2Finished = () => {
  pie2Ref.value?.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: 0
  })
}

onMounted(() => {
  initCards()
  initLine1()
  initBar1()
  initPie1()
  initPie2()
})
</script>

<template>
  <div class="stat-page-container">
    <div class="cards-container">
      <StatBoxCard :data="card1" title="当日人流量" color="green" compare type="monitor"></StatBoxCard>
      <StatBoxCard :data="card2" title="本月人流量" color="yellow" compare compare-text="较上月" type="monitor"></StatBoxCard>
      <StatBoxCard :data="card3" title="本年度人流量" color="blue" compare compare-text="较去年" type="monitor"></StatBoxCard>
      <StatBoxCard :data="card4" title="历史总人流量" color="orange" type="monitor"></StatBoxCard>
    </div>
    <div class="charts-container">
      <StatBoxChart title="近15日人流量趋势">
        <template v-if="line1NoData">
          <div class="no-data-container">
            <span>暂无数据</span>
          </div>
        </template>
        <template v-else>
          <template v-if="!lineChartOpt1">
            <div v-loading="!lineChartOpt1" class="no-data-container"></div>
          </template>
          <template v-else>
            <v-chart :option="lineChartOpt1" autoresize></v-chart>
          </template>
        </template>
      </StatBoxChart>
      <StatBoxChart title="游客年龄占比">
        <template #toolbar>
          <el-select v-model="pie1Type" style="width: 78px">
            <el-option v-for="item in filterOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </template>
        <template v-if="pie1NoData">
          <div class="no-data-container">
            <span>暂无数据</span>
          </div>
        </template>
        <template v-else>
          <template v-if="!pieChartOpt1">
            <div v-loading="!pieChartOpt1" class="no-data-container"></div>
          </template>
          <template v-else>
            <v-chart :option="pieChartOpt1" autoresize></v-chart>
          </template>
        </template>
      </StatBoxChart>
      <StatBoxChart title="近一年人流量趋势">
        <template v-if="bar1NoData">
          <div class="no-data-container">
            <span>暂无数据</span>
          </div>
        </template>
        <template v-else>
          <template v-if="!barChartOpt1">
            <div v-loading="!barChartOpt1" class="no-data-container"></div>
          </template>
          <template v-else>
            <v-chart :option="barChartOpt1" autoresize></v-chart>
          </template>
        </template>
      </StatBoxChart>
      <StatBoxChart title="游客性别占比">
        <template #toolbar>
          <el-select v-model="pie2Type" style="width: 78px">
            <el-option v-for="item in filterOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </template>
        <template v-if="pie2NoData">
          <div class="no-data-container">
            <span>暂无数据</span>
          </div>
        </template>
        <template v-else>
          <template v-if="!pieChartOpt2">
            <div v-loading="!pieChartOpt2" class="no-data-container"></div>
          </template>
          <template v-else>
            <v-chart ref="pie2Ref" :option="pieChartOpt2" autoresize @finished="pie2Finished"></v-chart>
          </template>
        </template>
      </StatBoxChart>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.stat-page-container {
  @include rect(100%, 100%);
  display: flex;
  flex-direction: column;
  .cards-container {
    @include rect(100%, 96px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .charts-container {
    width: 100%;
    flex: 1;
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    min-height: 580px;
    :deep(.el-select) {
      .el-input__wrapper {
        background-color: #f1f5f8;
        box-shadow: none;
      }
    }
  }
  .no-data-container {
    @include rect(100%, 100%);
    @include flex(row, center, center);
    span {
      font-family: 'PingFangSC-Regular';
      font-size: 14px;
      color: var(--theme-color-info-light-2);
    }
  }
}
</style>
